import React, { Component, Fragment } from 'react'
import { Row, Col } from 'antd'
// 模块化引入 echarts
import echarts from 'echarts'

export default class DashBoard extends Component {
	constructor(){
		super();
		this.state = {
			charts: null, // 图表的对象
			charts2: null,
			option : {
									color: ['#94b4a4'],
			            title: {
			                text: 'hello echart'
			            },
			            tooltip: {},
			            legend: {
			                data:['销量']
			            },
			            xAxis: {
			                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			            },
			            yAxis: {},
			            series: [{
			                name: '销量',
			                type: 'bar',
			                data: [5, 20, 36, 10, 10, 20]
			            }]
			        },
			option2 : {
			                    backgroundColor:'#333',
			                    tooltip: {
			                        formatter: "{a} <br/>值 : {c}"
			                    },
			                    grid: {
			                        top: 0,
			                        left: 0,
			                        right: 0,
			                        bottom: 0,
			                    },
			                    series: [{
			                        name: "内部进度条",
			                        type: "gauge",
			                        //center: ['20%', '50%'],
			                        radius: '48%',
			                        min: 0, //最小刻度
			                        max: 20, //最大刻度
			                        startAngle: 180,
			                        endAngle: 0,
			                        axisLine: {
			                            lineStyle: {
			                                color: [
			                                    [0.75, '#468EFD'],
			                                    [1, "#111F42"]
			                                ],
			                                width: 3
			                            }
			                        },
			                        axisLabel: {
			                            show: false,
			                        },
			                        axisTick: {
			                            show: false,
			
			                        },
			                        splitLine: {
			                            show: false,
			                        },
			                        itemStyle: {
			                            show: false,
			                        },
			                        detail: {
			
			                            offsetCenter: [0, -50],
			                            textStyle: {
			                                fontSize: 20,
			                                fontWeight: '700',
			                                color: '#468EFD'
			                            },
			                        },
			                        title: { //标题
			                            show: true,
			                            offsetCenter: [0, -5], // x, y，单位px
			                            textStyle: {
			                                color: "#ff0",
			                                fontSize: 30, //表盘上的标题文字大小
			                                fontWeight: 400,
			                                fontFamily: 'PingFangSC'
			                            }
			                        },
			                        data: [{
			                            name: "m/min",
			                            value: 0.75,
			                        }],
			                        pointer: {
			                            show: true,
			                            length: '75%',
			                            radius: '20%',
			                            width: 5, //指针粗细
			                        },
			                        animationDuration: 4000,
			                    }, {
			                        name: '外部刻度',
			                        type: 'gauge',
			                        //  center: ['20%', '50%'],
			                        radius: '50%',
			                        min: 0, //最小刻度
			                        max: 20, //最大刻度
			                        splitNumber: 6, //刻度数量
			                        startAngle: 180,
			                        endAngle: 0,
			                        axisLine: {
			                            show: true,
			                            lineStyle: {
			                                width: 1,
			                                color: [
			                                    [1, 'rgba(0,0,0,0)']
			                                ]
			                            }
			                        }, //仪表盘轴线
			                        axisLabel: {
			                            show: true,
			                            color: '#ff0',
			                            distance: 35,
			                            fontSize: 20,
			                            formatter: function(v) {
			                                switch (v + '') {
			                                    case '0':
			                                        return '0';
			                                    case '10':
			                                        return '10';
			                                    case '20':
			                                        return '20';
			                                }
			                            }
			                        }, //刻度标签。
			                        axisTick: {
			                            show: true,
			                            splitNumber: 5,
			                            lineStyle: {
			                                color: '#ff0', //用颜色渐变函数不起作用
			                                width: 1,
			                            },
			                            length: -8
			                        }, //刻度样式
			                        splitLine: {
			                            show: true,
			                            length: -20,
			                            lineStyle: {
			                                color: '#ff0', //用颜色渐变函数不起作用
			                            }
			                        }, //分隔线样式
			                        detail: {
			                            show: false
			                        },
			                        pointer: {
			                            show: true
			                        }
			                    }]
			                }
		}
	}
	render() {
		return (
			<Fragment>
				<div className="dash-head">
					<Row gutter={10}>
						<Col 
							span={6}>
								<div
									style={{
										background:"#94b4a4",
										height:200
									}}
								/>
							</Col>
						<Col 
							span={6}>
								<div
									style={{
										background:"#d2f5e3",
										height:200
									}}
								/>
							</Col>
						<Col 
							span={6}>
								<div
									style={{
										background:"#e5c5b5",
										height:200
									}}
								/>
							</Col>
						<Col 
							span={6}>
								<div
									style={{
										background:"#f4d9c6",
										height:200
									}}
								/>
							</Col>
					</Row>
				</div>
				<Row gutter={10} className="dash-main">
					<Col span={6}>
						{/* 图标dom容器 */}
						<div id="charts" style={{height:300}} ref={ (charts)=>{ this.charts = charts } }></div>
					</Col>
					<Col span={6}>
						<div id="charts2" style={{height:300}} ref={ (charts)=>{ this.charts2 = charts } }></div>
					</Col>
					<Col span={6}></Col>
					<Col span={6}></Col>
				</Row>
			</Fragment>
		)
	}
	componentDidMount(){
		// 初始化图表
		this.initChart()
	}
	initChart = ()=>{
		const charts = echarts.init(this.charts);
		this.setState({
			charts
		},()=>{
			// 调用charts setOption方法 渲染图表
			this.state.charts.setOption(this.state.option)
		})
		
		const charts2 = echarts.init(this.charts2);
		this.setState({
			charts2
		},()=>{
			// 调用charts setOption方法 渲染图表
			this.state.charts2.setOption(this.state.option2)
		})
	}
}
